<!--
 * @Author: pgz285 1272160626@qq.com
 * @Date: 2022-09-07 14:24:39
 * @LastEditors: pgz285 1272160626@qq.com
 * @LastEditTime: 2022-09-08 12:31:56
 * @FilePath: /element-admin/src/views/Login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="login-page" class="both-center">
    <div class="container-news space-between hor-center">
      <div class="left">
        <img src="@/assets/svg/login/login01.svg" alt="">
      </div>
      <div class="right col relative">
        <div class="qrcode"><img src="@/assets/svg/login/qrcode.svg" alt=""></div>
        <div class="col stgap4">
          <div class="title">欢迎使用本系统</div>
          <div class="col stgap3">
            <el-input placeholder="请输入用户名" v-model="account" autofocus></el-input>
            <el-input placeholder="请输入密码" v-model="password" maxlength="12" show-password @keyup.enter.native="login()"></el-input>
          </div>
          <div class="col stgap2">
            <el-button style="width:100%" type="primary" :disabled="!canlogin" size="medium" :loading="loading" @click="login()">
              登录
            </el-button>
            <div class="space-between hor-center">
              <el-checkbox v-model="checked" @click="save()">记住密码</el-checkbox>
              <el-button type="text">忘记密码？</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import throttle from '../lib/throttle'

export default {
  name: "Login",
  data() {
    return {
      account: 'joe',
      password: '88888888',
      checked: false,
      loading: false,
    }
  },
  computed: {
    canlogin() {
      if (this.account != '' && this.password.length >= 8) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    save() {
      this.checked = !this.checked
    },
    login() {
      if (this.account != 'joe' || this.password != '88888888') {
        this.$message({
          showClose: true,
          message: '账号密码有误',
          type: 'error',
          duration: 1800
        });
        return
      }
      this.loading = true
      throttle(this.go, 2000)

    },
    go() {
      this.$message({
        showClose: true,
        message: '登录成功!',
        type: 'success',
        duration: 1800
      });
      this.$router.push('/')
    }
  }

}
</script>

<style scoped>
#login-page {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #F9F9F9;
  background-image: url('../assets/svg/login/bg2.svg');
  background-size: cover;
}

.left {
  width: 571px;
  height: 571px;
}

.right {
  width: 460px;
  height: 516px;
  padding: 40px;
  border-radius: 12px;

  background: #FFFFFF;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08), 0px 2px 6px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 2px rgba(0, 0, 0, 0.04);
}

.title {
  font-family: HarmonyOS_Sans_SC_Bold;
  font-size: 20px;
  font-weight: bold;
  line-height: 28px;
  letter-spacing: 0px;
  color: #000000;
}

.qrcode {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
</style>